<template>
  <div class="page-container comment-container">
    <!-- Table主体 -->

    <el-table :data="props.data.rows" style="width: 100%" border v-loading="loading">
      <el-table-column label="序号" align="center" width="150">
        <template #default="scope">
          {{ scope.$index + 1 + (props.query.page - 1) * props.query.limit }}
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center" width="150">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.avatar"
            fit="fill"
          />
        </template>
      </el-table-column>
      <el-table-column label="昵称" align="center" width="150">
        <template #default="scope">
          {{ scope.row.nickname }}
        </template>
      </el-table-column>
      <el-table-column label="内容" align="center">
        <template #default="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期" align="center" width="150">
        <template #default="scope">
          {{ formDates(scope.row.createDate, true) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template #default="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            :open-delay="300"
            placement="top"
            :hide-after="500"
          >
            <el-button
              type="danger"
              @click="handleDeleteTable(scope.row.id)"
              size="large"
              :icon="Delete"
              circle
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->

    <div class="pager-main">
      <el-pagination
        background
        layout="prev, pager, next,sizes"
        :total="props.data.total"
        :page-sizes="[5, 10, 15]"
        :page-size="props.query.limit"
        @current-change="ChangePage"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, PropType, ref, watch } from "vue";
import { formDates } from "@/utils/Date";
import { Delete } from "@element-plus/icons-vue";
import { ICommentQuery, IReturnCom } from "@/api/comment";
import { ElMessageBox, ElMessage } from "element-plus";
// 类型约束
type IhandleDelete = (id: string) => void;
type IHandleChangePage = (val: number, key: string) => void;

// 页面加载效果
const loading = ref<boolean>(false);

//传过来的属性
const props = defineProps({
  data: {
    type: Object as PropType<IReturnCom>,
    default: {
      rows: [],
      total: 0,
    },
    required: true,
  },
  query: {
    type: Object as PropType<ICommentQuery>,
    default: {
      page: 1,
      limit: 5,
    },
    required: true,
  },
  handleDelete: {
    type: Function as PropType<IhandleDelete>,
    required: true,
  },
  handleChangePage: {
    type: Function as PropType<IHandleChangePage>,
    required: true,
  },
});

// 修改页面
function ChangePage(page: number) {
  loading.value = true;
  props.handleChangePage(page, "page");
}

// 删除前的弹窗
function handleDeleteTable(id: string) {
  ElMessageBox.confirm("确认删除该评论吗?", "删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    loading.value = true;
    props.handleDelete(id);
    ChangePage(1);
    loading.value = false;
    ElMessage({
      type: "success",
      message: "删除该评论成功",
    });
  });
}

// 修改多少
function handleSizeChange(size: number) {
  loading.value = true;
  props.handleChangePage(size, "limit");
}

// 监听data的变化
watch(
  () => props.data,
  () => {
    loading.value = false;
  },
  {
    deep: true,
  }
);
</script>

<style lang="less" scoped>
.pager-main {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
}
</style>
